<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.3.1.js"></script>
    <style>

        .input{
            width:500px;
            height:40px;
            border:1px solid #ccc;
            border-radius:5px;
            font-size:18px;
            padding:10px;
            box-sizing: border-box;
            outline:none;
        }
        .blueborder{
            border:1px solid blue;
        }
        .redborder{
            border:1px solid red;
        }
        ::placeholder{
            color:#aaa;
        }
        .error{
            color:red;
            font-size:14px;
            margin-top:5px;
            margin-top: -15px;
            height:0px;
            overflow: hidden;
            line-height:30px;
            transition:all .2s linear;

        }
        .error img{
            margin:auto 5px;
            margin-top:5px;
        }
        .clearfix:after{
            clear:both;
            content:"";
            display:table;
        }
        .fl{
            float:left;
        }
        .inputDiv{
            position:relative;
            float:left;
            margin-top:20px;
            clear:both;
        }
    </style>
    <script>
        $(f);

        function f() {
             //1.以下是昵称判断
            {
            $("#nickName").focus(
                function () {
                    $(this).removeClass();
                    $(this).addClass("input blueborder");
                    $("#error1").css("height", "0px");
                    $("#error1").css("margin-top", "-15px");
                    setTimeout(function () {
                        $("#error1").hide();
                    }, 200);

                }
            );

            $("#nickName").blur(
                function () {
                    var nickName = $(this).val();
                    var reg = /^\s+$/;

                    if (reg.test(nickName)) {
                        $("#error1 span").text("昵称不可以是空格！");
                    } else if (nickName.length == 0) {
                        $("#error1 span").text("昵称不可以为空！");
                    } else {
                        $("#nickNameDiv>img").show();
                        return;
                    }

                    $(this).removeClass();
                    $(this).addClass("input redborder");
                    $("#error1").show();
                    $("#error1").css("height", "30px");
                    $("#error1").css("margin-top", "5px");
                }
            );
        }
            //2.以下是密码判断
            {
                $("#pwd").focus(
                    function () {
                        $(this).removeClass();
                        $(this).addClass("input blueborder");
                        $("#error2").css("height", "0px");
                        $("#error2").css("margin-top", "-15px");
                        setTimeout(function () {
                            $("#error2").hide();
                        }, 200);

                    }
                );

                $("#pwd").blur(
                    function () {
                        var nickName = $(this).val();
                        var reg = /^\s+$/;

                        if (reg.test(nickName)) {
                            $("#error2 span").text("密码不可以是空格！");
                        } else if (nickName.length == 0) {
                            $("#error2 span").text("密码不可以为空！");
                        } else {
                            $("#pwdDiv>img").show();
                            return;
                        }

                        $(this).removeClass();
                        $(this).addClass("input redborder");
                        $("#error2").show();
                        $("#error2").css("height", "30px");
                        $("#error2").css("margin-top", "5px");
                    }
                );

            }
            //3.点击注册按钮后的行为
            {
                $("#regbtn").click(function () {
                   //$("#nickName").blur();
                   //$("#pwd").blur();
                });
                $("#regbtn").mousedown(
                    function(){
                        $("#pwd").attr("type","text");
                    }
                );

                $("#regbtn").mouseup(
                    function(){
                        $("#pwd").attr("type","password");
                    }
                );

                $("#regbtn").mouseout(
                    function(){
                        $("#pwd").attr("type","password");
                    }
                );
            }
        }
    </script>
</head>
<body>

   <div class="inputDiv" id="nickNameDiv">
      <input class="input" id="nickName" placeholder="昵称" />
      <div id="error1" class="error clearfix"><img class="fl" src="https://4.url.cn/zc/v3/img/error.png" />
        <span class="fl">昵称不可以为空</span></div>
       <img src="https://4.url.cn/zc/v3/img/tick.png" style="display:none;position:absolute;right:10px;top:10px;" />
   </div>

  <div class="inputDiv" id="pwdDiv">
      <input class="input" id="pwd" type="password" placeholder="密码" />
      <div id="error2" class="error clearfix"><img class="fl" src="https://4.url.cn/zc/v3/img/error.png" />
          <span class="fl">密码不可以为空</span></div>
      <img src="https://4.url.cn/zc/v3/img/tick.png" style="display:none;position:absolute;right:10px;top:10px;" />
  </div>

  <button id="regbtn">注册</button>
</body>
</html>










